<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PPH系统管理界面</title>
    <!-- Bootstrap CSS with fallback -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
          onerror="this.onerror=null;this.href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css';">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet"
          onerror="this.onerror=null;this.href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.7.2/font/bootstrap-icons.min.css';">

    <!-- 浏览器兼容性样式 -->
    <link href="css/browser-compatibility.css" rel="stylesheet">

    <!-- Fallback CSS for older browsers -->
    <style>
        /* IE11 and older browser compatibility */
        .d-flex { display: flex !important; }
        .flex-column { flex-direction: column !important; }
        .justify-content-between { justify-content: space-between !important; }
        .align-items-center { align-items: center !important; }
        .text-center { text-align: center !important; }
        .text-muted { color: #6c757d !important; }
        .mb-0 { margin-bottom: 0 !important; }
        .mb-2 { margin-bottom: 0.5rem !important; }
        .mb-3 { margin-bottom: 1rem !important; }
        .mb-4 { margin-bottom: 1.5rem !important; }
        .mt-4 { margin-top: 1.5rem !important; }
        .p-3 { padding: 1rem !important; }
        .btn {
            display: inline-block;
            padding: 0.375rem 0.75rem;
            margin-bottom: 0;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            text-align: center;
            text-decoration: none;
            vertical-align: middle;
            cursor: pointer;
            border: 1px solid transparent;
            border-radius: 0.25rem;
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }
        .btn-primary { color: #fff; background-color: #0d6efd; border-color: #0d6efd; }
        .btn-success { color: #fff; background-color: #198754; border-color: #198754; }
        .btn-danger { color: #fff; background-color: #dc3545; border-color: #dc3545; }
        .btn-warning { color: #000; background-color: #ffc107; border-color: #ffc107; }
        .btn-outline-secondary { color: #6c757d; border-color: #6c757d; background-color: transparent; }
        .btn-outline-secondary:hover { color: #fff; background-color: #6c757d; border-color: #6c757d; }
        .card { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0,0,0,.125); border-radius: 0.25rem; }
        .card-header { padding: 0.5rem 1rem; margin-bottom: 0; background-color: rgba(0,0,0,.03); border-bottom: 1px solid rgba(0,0,0,.125); }
        .card-body { flex: 1 1 auto; padding: 1rem; }
        .table { width: 100%; margin-bottom: 1rem; color: #212529; border-collapse: collapse; }
        .table th, .table td { padding: 0.5rem; vertical-align: top; border-top: 1px solid #dee2e6; }
        .table thead th { vertical-align: bottom; border-bottom: 2px solid #dee2e6; }
        .container-fluid { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
        .row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }
        .col-md-3 { flex: 0 0 25%; max-width: 25%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; }
        .col-md-9 { flex: 0 0 75%; max-width: 75%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; }
        .col-12 { flex: 0 0 100%; max-width: 100%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; }

        /* Mobile responsive */
        @media (max-width: 768px) {
            .col-md-3, .col-md-9 { flex: 0 0 100%; max-width: 100%; }
            .btn-group .btn { margin-bottom: 5px; }
            .log-container { height: 300px; }
        }
    </style>
    <style>
        /* 基础样式 */
        .status-online { color: #28a745; }
        .status-stopped { color: #dc3545; }
        .status-error { color: #ffc107; }
        .log-container {
            background: #1e1e1e;
            color: #fff;
            font-family: 'Courier New', monospace;
            height: 400px;
            overflow-y: auto;
            padding: 15px;
            border-radius: 5px;
        }
        .card-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        .navbar {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .btn-group .btn { margin-right: 5px; }
        .system-info { font-size: 0.9em; }
        .memory-bar {
            height: 20px;
            background: #e9ecef;
            border-radius: 10px;
            overflow: hidden;
        }
        .memory-used {
            background: linear-gradient(90deg, #28a745, #ffc107, #dc3545);
            height: 100%;
            transition: width 0.3s;
        }

        /* 浏览器特定修复 */
        .browser-ie .card-header,
        .browser-ie .navbar {
            background: #667eea; /* IE11 不支持渐变时的回退色 */
        }

        .browser-ie .memory-used {
            background: #28a745; /* IE11 渐变回退 */
        }

        /* 确保在所有浏览器中正确显示 */
        .table-responsive {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        /* 修复 IE11 flex 布局问题 */
        .browser-ie .d-flex {
            display: -ms-flexbox !important;
            display: flex !important;
        }

        .browser-ie .flex-column {
            -ms-flex-direction: column !important;
            flex-direction: column !important;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-dark">
        <div class="container-fluid">
            <span class="navbar-brand mb-0 h1">
                <i class="bi bi-gear-fill"></i> PPH系统管理界面
            </span>
            <span class="navbar-text" id="currentTime"></span>
        </div>
    </nav>

    <div class="container-fluid mt-4">
        <!-- 系统状态卡片 -->
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="card">
                    <div class="card-header">
                        <i class="bi bi-cpu"></i> 系统信息
                    </div>
                    <div class="card-body system-info" id="systemInfo">
                        <div class="text-center">
                            <div class="spinner-border" role="status">
                                <span class="visually-hidden">加载中...</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 第三方连通性（Lenovo DSP） -->
                <div class="card mt-3">
                    <div class="card-header">
                        <i class="bi bi-plug"></i> 第三方连通性（Lenovo DSP）
                    </div>
                    <div class="card-body">
                        <div id="thirdPartyStatus" class="mb-2">
                            <span class="badge bg-secondary">检测中...</span>
                        </div>
                        <button class="btn btn-sm btn-outline-secondary" onclick="pphMgmt.checkThirdPartyConnectivity()">
                            <i class="bi bi-arrow-repeat"></i> 重新检测
                        </button>
                    </div>
                </div>
            </div>
            <div class="col-md-9">
                <div class="card">
                    <div class="card-header">
                        <i class="bi bi-list-task"></i> 服务状态
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped" id="servicesTable">
                                <thead>
                                    <tr>
                                        <th>服务名称</th>
                                        <th>状态</th>
                                        <th>PID</th>
                                        <th>运行时间</th>
                                        <th>重启次数</th>
                                        <th>内存使用</th>
                                        <th>CPU使用</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td colspan="8" class="text-center">
                                            <div class="spinner-border" role="status">
                                                <span class="visually-hidden">加载中...</span>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="mt-3">
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-success" onclick="startAllServices()">
                                    <i class="bi bi-play-fill"></i> 启动全部
                                </button>
                                <button type="button" class="btn btn-warning" onclick="restartAllServices()">
                                    <i class="bi bi-arrow-clockwise"></i> 重启全部
                                </button>
                                <button type="button" class="btn btn-danger" onclick="stopAllServices()">
                                    <i class="bi bi-stop-fill"></i> 停止全部
                                </button>
                                <button type="button" class="btn btn-info" onclick="refreshServices()">
                                    <i class="bi bi-arrow-repeat"></i> 刷新状态
                                </button>
                                <button type="button" class="btn btn-outline-secondary" onclick="pphMgmt.checkThirdPartyConnectivity()" title="检查第三方连通性">
                                    <i class="bi bi-plug"></i> 检测第三方
                                </button>
                            </div>
                            <div class="btn-group ms-2" role="group">
                                <button type="button" class="btn btn-outline-secondary" onclick="setupPm2Startup()" title="设置 PM2 开机自启并保存">
                                    <i class="bi bi-rocket-takeoff"></i> 设置开机自启
                                </button>
                                <button type="button" class="btn btn-outline-secondary" onclick="openFirewall()" title="放行 3010/3011/3012">
                                    <i class="bi bi-shield-check"></i> 放行防火墙
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 日志管理 -->
        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <i class="bi bi-file-text"></i> 日志文件
                    </div>
                    <div class="card-body">
                        <div class="list-group" id="logFilesList">
                            <div class="text-center">
                                <div class="spinner-border" role="status">
                                    <span class="visually-hidden">加载中...</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <span><i class="bi bi-terminal"></i> 日志内容</span>
                        <div class="btn-group btn-group-sm">
                            <button type="button" class="btn btn-outline-light" onclick="toggleAutoRefresh()" id="autoRefreshBtn">
                                <i class="bi bi-pause"></i> 暂停自动刷新
                            </button>
                            <button type="button" class="btn btn-outline-light" onclick="clearLogDisplay()">
                                <i class="bi bi-trash"></i> 清空显示
                            </button>
                            <button type="button" class="btn btn-outline-light" onclick="exportCurrentLog()" id="exportBtn" disabled>
                                <i class="bi bi-download"></i> 导出
                            </button>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <div class="log-container" id="logContent">
                            <div class="text-center text-muted">
                                请选择一个日志文件查看内容
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 操作记录（审计日志） -->
        <div class="row mt-4">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <span><i class="bi bi-clipboard-data"></i> 操作记录（最近 500 条）</span>
                        <div class="d-flex align-items-center gap-2">
                            <select id="auditAction" class="form-select form-select-sm" style="width:140px;">
                                <option value="">全部动作</option>
                                <option value="start">start</option>
                                <option value="stop">stop</option>
                                <option value="restart">restart</option>
                            </select>
                            <input id="auditService" class="form-control form-control-sm" placeholder="服务名称(模糊)">
                            <select id="auditSuccess" class="form-select form-select-sm" style="width:120px;">
                                <option value="">全部结果</option>
                                <option value="true">成功</option>
                                <option value="false">失败</option>
                            </select>
                            <button type="button" class="btn btn-sm btn-light" onclick="refreshAudit()">
                                <i class="bi bi-arrow-repeat"></i> 刷新
                            </button>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-striped mb-0">
                                <thead>
                                    <tr>
                                        <th style="width: 200px;">时间</th>
                                        <th>来源IP</th>
                                        <th>操作</th>
                                        <th>服务</th>
                                        <th>结果</th>
                                        <th>错误</th>
                                    </tr>
                                </thead>
                                <tbody id="auditTableBody">
                                    <tr><td colspan="6" class="text-center text-muted">加载中...</td></tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="d-flex justify-content-between align-items-center p-2">
                            <div>
                                <button class="btn btn-sm btn-outline-secondary" onclick="prevAuditPage()">上一页</button>
                                <button class="btn btn-sm btn-outline-secondary" onclick="nextAuditPage()">下一页</button>
                            </div>
                            <div id="auditPageInfo" class="small text-muted"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 操作确认模态框 -->
    <div class="modal fade" id="confirmModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">确认操作</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="confirmMessage">
                    确定要执行此操作吗？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="confirmBtn">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 加载提示模态框 -->
    <div class="modal fade" id="loadingModal" tabindex="-1" data-bs-backdrop="static">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-body text-center">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">处理中...</span>
                    </div>
                    <div class="mt-2" id="loadingMessage">正在处理...</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS with fallback -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
            onerror="this.onerror=null;var s=document.createElement('script');s.src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js';document.head.appendChild(s);"></script>

    <!-- Polyfills for older browsers -->
    <script>
        // Fetch polyfill for IE11
        if (!window.fetch) {
            document.write('<script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@3.6.2/dist/fetch.umd.js"><\/script>');
        }

        // Promise polyfill for IE11
        if (!window.Promise) {
            document.write('<script src="https://cdn.jsdelivr.net/npm/es6-promise@4.2.8/dist/es6-promise.auto.min.js"><\/script>');
        }

        // Array.from polyfill for IE11
        if (!Array.from) {
            Array.from = function(arrayLike) {
                return Array.prototype.slice.call(arrayLike);
            };
        }

        // Object.assign polyfill for IE11
        if (!Object.assign) {
            Object.assign = function(target) {
                for (var i = 1; i < arguments.length; i++) {
                    var source = arguments[i];
                    for (var key in source) {
                        if (Object.prototype.hasOwnProperty.call(source, key)) {
                            target[key] = source[key];
                        }
                    }
                }
                return target;
            };
        }

        // String.includes polyfill for IE11
        // String.includes polyfill for IE11
        if (!String.prototype.includes) {
            String.prototype.includes = function(search, start) {
                if (typeof start !== 'number') { start = 0; }
                if (start + search.length > this.length) { return false; }
                return this.indexOf(search, start) !== -1;
            };
        }
    </script>
    <script src="js/management.js?v=20250826-05"></script>
  </body>
</html>

        if (!String.prototype.includes) {
            String.prototype.includes = function(search, start) {
                if (typeof start !== 'number') {
                    start = 0;
                }
                if (start + search.length > this.length) {
                    return false;
                } else {
                    return this.indexOf(search, start) !== -1;
                }
            };
        }
    </script>

</body>
</html>
